<template>
  <div class="page">
    <div class="main">
      <div class="login_form">
        <div class="title">注册成为新用户</div>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="120px"
          :rules="rules"
        >
          <el-form-item prop="username" label="用户名" required>
            <el-input
              v-model.number="ruleForm.username"
              placeholder="请输入用户名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码" required>
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入登录密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="手机号" required="">
            <el-input
              type="tel"
              v-model="ruleForm.mobile"
              autocomplete="off"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="validatorNo" label="验证码" required>
            <el-input
              type="number"
              v-model="ruleForm.validatorNo"
              autocomplete="off"
              placeholder="请输入验证码"
            >
              <template slot="append"
                ><el-button
                  style="width: 140px"
                  @click="sendCode"
                  :disabled="second < 60 && second > 0"
                  >{{ btnText }}</el-button
                ></template
              ></el-input
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="submit_btn"
              type="primary"
              @click="submitForm('ruleForm')"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'))
      } else {
        callback()
      }
    }
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名称'))
      } else {
        callback()
      }
    }
    var validateNo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入右侧验证码'))
      } else {
        callback()
      }
    }
    var validateMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入正确格式的手机号'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        username: '',
        password: '',
        validatorNo: '',
        mobile: '',
      },
      rules: {
        username: [{ validator: validateUsername, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        validatorNo: [{ validator: validateNo, trigger: 'blur' }],
        mobile: [{ validator: validateMobile, trigger: 'blur' }],
      },
      timerId: '',
      second: 60,
      btnText: '发送验证码',
    }
  },
  methods: {
    // 注册
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('注册成功，请登录')
          this.$router.push('/')
          localStorage.setItem('username', this.ruleForm.username)
          // this.getToken(this.ruleForm)
        } else {
          this.$message.warning('请检查输入项')
          return false
        }
      })
    },

    // 发送验证码
    sendCode() {
      this.$message.success('已发送，请至手机查看')
      if (this.timerId) clearInterval(this.timerId)
      this.timerId = setInterval(() => {
        this.second--
        this.btnText = `${this.second}秒后重新发送`
        if (this.second == 0) {
          this.second = 60
          this.btnText = '发送验证码'
          clearInterval(this.timerId)
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: unset;
  .main {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    .login_form {
      width: 40%;
      height: 60%;
      border-radius: 10px;
      background: #fff;
      .title {
        margin: 20px 0;
        font-weight: 500;
        color: #000;
        font-size: 16px;
        text-align: center;
      }
      .el-form {
        padding-right: 40px;
      }
      .submit_btn {
        width: 100%;
      }
    }
  }
}
</style>